import React, { Component } from 'react'
import { Button, Card, List, Avatar, Icon, Badge, Tag } from 'antd'
import { connect } from 'react-redux'
import { readnote, allreadnote } from '../../actions/readnote'

class Notification extends Component {

    readnotelist = (id) => {
        this.props.readnote(id)
        //readnote(id)

    }
    render() {
     

        return (
            <div>

                <Card title="通知中心" extra={<Button disabled={this.props.List.every(item => item.hsaRead === true)} onClick={() => {

                    this.props.allreadnote()

                }}>全部标记为已读</Button>}>
                    <List
                        itemLayout="horizontal"
                        dataSource={this.props.List}
                         loading={this.props.Nottifition.isLoading}
                        renderItem={item => (
                            <List.Item>
                                <List.Item.Meta
                                    avatar={<Badge dot={!item.hsaRead}><Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>}
                                    title={item.title}
                                    description={item.desc}
                                />
                                {!item.hsaRead ? <Tag color="#f50" onClick={this.readnotelist.bind(this, item.id)}>标记为以读</Tag> : <Tag color="#108ee9">已读</Tag>}
                            </List.Item>
                        )}
                    />



                </Card>
            </div>
        )
    }
}

const mapState = (state) => {
  
    return {
        List: state.Nottifition.List,
        Nottifition:state.Nottifition
    }

}
export default connect(mapState, { readnote, allreadnote })(Notification)



